<template>
    <el-card shadow="never">
      <!-- 新增刷新 -->
      <ListHeader @create="handleCreate" @refresh="getData"></ListHeader>
  
      <!-- 表格 -->
  
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="content" label="客服賬號" />
        <el-table-column prop="status" label="狀態">
          <template #default="{ row }">
            <el-tag :type="row.status == 1 ? '' : 'danger'">{{
              row.status == 1 ? "正常" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="handleEdit(row)"
              >修改</el-button
            >
  
            <el-popconfirm
              title="是否要刪除?"
              confirm-button-text="確定"
              cancel-button-text="取消"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small"
                  >刪除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="flex justify-center mt-4"
        @current-change="getData"
        :current-page="curpage"
        :page-size="limit"
      />
  
      <!-- 提交表单 -->
      <FormDrawer ref="formDrawerRef" @submit="handleSubmit" :title="drawerTitle">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
          <el-form-item label="客服賬號" prop="content">
            <el-input v-model="form.content"></el-input>
          </el-form-item>
  
          <el-form-item label="狀態" prop="status">
            <el-select v-model="form.status" placeholder="請選擇">
              <el-option label="正常" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
      </FormDrawer>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import {
    getservice,
    createservice,
    updateservice,
    delservice
   } from "@/api/store.js"
  
  import FormDrawer from "@/components/FormDrawer.vue";
  import ListHeader from "@/components/ListHeader.vue";
  
  import { useInitTable, useInitForm } from "@/composables/useCommon.js";
  
  const {
    tableData,
    loading,
    curpage,
    total,
    limit,
    getData,
    handleDelete,
  } = useInitTable({
    getList: getservice,
    delete: delservice,
  });
  
  //表单
  
  const {
    formDrawerRef,
    formRef,
    form,
    rules,
    drawerTitle,
    handleSubmit,
    handleCreate,
    handleEdit,
  } = useInitForm({
    form: {
      content: "",
      status: "",
    },
    rules: {
      content: [{ required: true, message: "客服賬號不能為空", trigger: "blur" }],
    },
    getData,
    update: updateservice,
    create: createservice,
  });
  </script>
  